<template>
  <div class="history-list" v-show="list.length">
    <ul>
      <li
        class="history-list--item"
        @click="handleItem(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <span class="text">{{item}}</span>
        <span class="icon" @click.stop="deleteItem(index)">
          <i class="iconfont">&#xe603;</i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'History',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleItem (item) {
      this.$emit('item', item)
    },
    deleteItem (index) {
      this.$emit('delete', index)
    }
  }
}
</script>

<style scoped lang="less">
@import '~assets/style/variable';
@import '~assets/style/mixin';
.history-list {
  &--item {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: @fs-medium;
    border-bottom: 1px solid @border-color;
    .text {
      flex: 1;
      color: var(--text-color);
      .no-wrap();
    }
    .icon {
      .extend-click();
      .iconfont {
        font-size: @fs-medium;
        color: var(--text-color);
      }
    }
  }
}
</style>
